<template>
    <!-- -->
    <el-dialog v-model="show" title="添加时间段" @close="emit('hide')">
        <el-form ref="formRef" :model="form">
            <el-form-item label="秒杀时间段名称">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="每日开始时间" prop="startTime">
                <el-input v-model="form.startTime" autocomplete="off" />
            </el-form-item>
            <el-form-item label="每日结束时间" prop="endTime">
                <el-input v-model="form.endTime" autocomplete="off" />
            </el-form-item>

            <el-form-item label="是否启用" prop="status">

                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>

            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="hideFn">取消</el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">import { user } from '@/api';
import { reactive, toRefs, watch } from 'vue';
import { fomatDate } from "@/utils"
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    setId: {
        type: Number,
        default: 0
    }
})
// interface Istate {
//     tableData: ISkillTime[]
// }

// const state = reactive<Istate>({
//     tableData: []
// })

const form = reactive<ISkillTime>({
    createTime: '',
    endTime: '',
    id: 0,
    name: '',
    startTime: '',
    status: 1
});

const getlist = () => {
    user.miaoshaTimesetApi(props.setId).then(res => {
        if (res.code === 200) {
            Object.assign(form, res.data)
            console.log(form);

        }
    })
}

// let { tableData } = toRefs(state)
const emit = defineEmits(['hide', 'refarh'])

//编辑框点击确定
const sureFn = () => {
    ElMessageBox.confirm("是否确认修改", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        if (props.setId !== 0) {
            user.miaoshaTimeSuresetApi(form).then(res => {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
            })
            //关闭编辑框
            emit('hide')
            //刷新
            emit('refarh')
        } else {
            user.miaoshaTimeSureApi(form).then(res => {
                ElMessage({
                    message: res.message,
                    type: res.code === 200 ? "success" : "error",
                });
            })
            //关闭编辑框
            emit('hide')
            //刷新
            emit('refarh')
        }
    }).catch(() => {

    })
}
//点击取消
const hideFn = () => {
    emit('hide')
    form.createTime = ''
    form.endTime = ''
    form.id = 0
    form.name = ''
    form.startTime = ''
    form.status = 1
}
watch(
    () => props.setId,
    () => {
        if (props.setId === 0) {
            form.createTime = ''
            form.endTime = ''
            form.id = 0
            form.name = ''
            form.startTime = ''
            form.status = 1
        }
        // 否则就是点击了编辑，就可以向服务器发起请求
        getlist()
    }


)
</script>

<style lang="less" scoped>

</style>